<template>

	<view class="">
		<view >
			<view class="top">
				<image style="width: 100%;height: 350px;" :src="global+goo.image"></image>
			</view>
			<unisection title="商品介绍" type="line"></unisection>
			<view style="color: #999999;margin: 20rpx;font-size: 30rpx;">{{"名称："+goo.name}}</view>
			<view v-if="wxstatus=='已通过'" style="color: #999999;margin: 20rpx;font-size: 30rpx;">{{"原价：￥"+goo.startPrice}}
			</view>
			<view v-if="wxstatus=='已通过'" style="color: #999999;margin: 20rpx;font-size: 30rpx;">{{"现价：￥"+goo.currentPrice}}
			</view>
			<!-- <view style="color: #999999;margin: 20rpx;font-size: 30rpx;">{{"存库："+item.quantity}}</view> -->
			<rich-text :nodes="content"></rich-text>
			<unisection title="商品规格" type="line"></unisection>
			<view style="color: #999999;margin: 20rpx;font-size: 30rpx;" v-if="status == 0">状态：在拍卖</view>
			<view style="color: #999999;margin: 20rpx;font-size: 30rpx;" v-if="status != 0">状态：已结拍</view>

			<view style="color: #999999;margin: 20rpx;font-size: 30rpx;">{{"规格："+goo.type}}</view>
			<view v-if="pos!='用户'" style="color: #999999;margin: 20rpx;font-size: 30rpx;">{{"库存："+goo.count}}</view>
			<view style="margin-left: 20rpx;">
				<uni-number-box :min="1" :max="999" :value="quan" @change="myquan($event)"></uni-number-box>
			</view>
			<unisection title="商品详情" type="line"></unisection>
			<view style="color: #999999;margin: 20rpx;font-size: 30rpx;">{{"内容："+goo.description}}</view>
		</view>

		<unisection title="商品详情图" type="line"></unisection>
		<image style="width: 100%;margin-top: 20rpx;height: 350px;" :src="global+goo.image"></image>

		<view class="isbottom">
		</view>
		<view>
			<uniGoodsNav class="isbutto" :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	//引入
	import uniNumberBox from "../../components/uni-number-box/uni-number-box.vue"
	import uniGoodsNav from '../../components/uni-goods-nav/uni-goods-nav.vue'
	import unisection from '../../components/goo-section/goo-section.vue'
	import apis from '@/api/index.js'
	import G from '@/config/global.js'
	import {
		requestApi
	} from '@/utils/request.js'
	// 导入公共组件方法
	import common from '@/common/js/common.js';
	export default {
		data() {
			return {
				global: G.REQUEST_URL,
				products: {},
				info: {},
				order: {},
				user: {},
				goo: {
					name: ' 巧克力',
					price: '20',
					discount: '15',
					status: '上架',
					type: '250kg',
					quantity: '200',
					content: '好吃的巧克力'
				}, //商品信息
				quan: 1, //初始数量
				quan1: 0, //最终数量
				options: [{
					icon: 'headphones',
					text: '收藏列表'
				}],
				buttonGroup: [{
						text: '收藏',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				],
				websocket: '',
				message: '',
				receivedMessages: [],
			}
		},
		components: {
			uniGoodsNav,
			uniNumberBox,
			unisection
		},
		onLoad(e) {
			this.products.productId = e.id;
			this.getInfo();
			this.user = uni.getStorageSync("user");
			this.connect();
		},
		// mounted () {
		//   setInterval(() => {
		//     this.updades()
		//   }, 1000)
		// },
		methods: {
			updades() {
				if (this.goo.sellType != 0 && this.goo.status != 0) {
					this.goo.currentPrice = this.goo.currentPrice - 5;
					requestApi(apis.products.update, this.goo, 'post').then(res => {
						if (res.code == 200) {
							this.getInfo();
						} else {

						}
					})
				}
			},
			getInfo() {
				requestApi(apis.products.productDetail, this.products, 'post').then(res => {
					this.goo = res.data;
					this.connect();
				})
			},
			//存取數量
			myquan(e) {
				console.log(e)
				this.quan1 = e
			},
			//左侧
			onClick(e) {
				switch (e.index) {
					case 0:
						//客服
						break
					case 1:
						//购物车
						break
				}
			},
			//右侧
			buttonClick(e) {
				switch (e.index) {
					case 0:
						this.mycat();
						break
					case 1:
						this.orno();
						break
				}
			},
			//确认下单
			orno() {
				
					if (this.goo.status != 0) {
						this.sendMessage();
						var thit = this
						uni.showModal({
							title: '提示',
							content: '确认下单',
							success: function(res) {
								if (res.confirm) {
									thit.userBuy();
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					} else if (this.user.money < this.goo.currentPrice) {
						uni.showToast({
							icon: "error",
							title: "余额不足"
						})
					} else {
						uni.showToast({
							icon: "error",
							title: "商品已下架"
						})
					}
					
				

			},
			//下单
			getwxid() {
				this.goo.bids = this.goo.bids + 1;
				this.goo.count = this.goo.count - 1;
				requestApi(apis.products.update, this.goo, 'post').then(res => {
					if (res.code == 200) {
						
						uni.showToast({
							title: '竞拍成功',
							duration: 2000
						});
						this.disconnect();
					}
				})




			},
			userBuy() {
				this.order.productId = this.goo.productId;
				this.order.buyerId = uni.getStorageSync("user").userId;
				this.order.sellPrice = this.goo.currentPrice;
				this.order.type= this.goo.sellType;
				requestApi(apis.order.add, this.order, 'post').then(res => {
					if (res.code == 200) {
						this.getwxid();
					} else {
						uni.showToast({
							title:res.msg,
							icon:"error"
						})
					}
				})
			},
			mycat() {
				this.goo.liked = this.goo.liked++;
				if (this.useradd()) {
					requestApi(apis.products.update, this.goo, 'post').then(res => {
						if (res.code == 200) {

							uni.showToast({
								title: '收藏成功',
								duration: 2000
							});
						}
					})
				} else {

				}

			},
			useradd() {
				console.log(this.goo)
				this.info.productsId = this.goo.productId;
				this.info.userId = uni.getStorageSync("user").userId;
				requestApi(apis.productInfo.add, this.info, 'post').then(res => {
					if (res.code != 200) {
						uni.showToast({
							icon: "error",
							title: "您已经收藏过了"
						})
						return false;
					} else {
						return true;
					}
				})
			},
			updateUser() {
				requestApi(apis.user.edit, this.user, 'post').then(res => {
					if (res.code == 200) {
						uni.setStorageSync("user", data)
					}
				})
			},
			connect() {
			this.websocket =uni.connectSocket({
			  url: 'ws://localhost:8080/api/userWebSocket',
			  success: function (res) {
				  console.log(res);
				  this.sendMessage();
			    console.log('WebSocket connected');
			  },
			  fail: function (error) {
			    console.error('WebSocket connect failed:', error);
			  },
			  })
			},
			handleMessage() {
			     uni.onSocketMessage(function (res) {
			       console.log('收到服务器内容：' + res.data);
			     });
			    },
			sendMessage() {
				   const message  =JSON.stringify(uni.getStorageSync("user"));
				   console.log(message);
				      if (this.websocket && this.websocket.readyState === 1) {
				        this.websocket.send({
				          data: message,
				          success: () => {
				            console.log('Message sent:', message);
							this.handleMessage();
							return message;
				          },
				          fail: (error) => {
				            console.error('Failed to send message:', error);
				          }
				        });
				      } else {
				        console.error('WebSocket connection is not open');
				      }
			},
			disconnect() {
				  if (this.websocket) {
				        this.websocket.close();
				        console.log('WebSocket connection closed');
				      }
			}
		}
	}
</script>

<style lang="scss">
	.top {
		image {
			width: 100%;
			height: 100%;
		}
	}

	.body_list {
		border-bottom: 1rpx none #3B4144;
		margin-bottom: 40rpx;
		margin-top: 40rpx;
	}

	.body_list_1 {
		margin-left: 40rpx;
		margin-bottom: 40rpx;
		font-size: 35rpx;
	}

	.hot_goods {
		background: #eee;
		overflow: hidden;

		.tit {
			height: 50px;
			line-height: 50px;
			color: #b50e03;
			text-align: center;
			letter-spacing: 20px;
			background: #fff;
			margin: 10rpx 0;
		}
	}

	.datetime {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10rpx;

		.datetime1 {
			border: 1rpx solid #3B4144;
			width: 30%;
			height: 130rpx;
			margin: 10rpx;
			text-align: center;
			border-radius: 15rpx;
			background-color: #FFFFFF;

			.datetime11 {
				text-align: center;
				font-size: 25rpx;
				position: relative;

			}
		}

		.ismycolor {
			border: 3rpx solid #AAAAAA;
			width: 30%;
			height: 130rpx;
			margin: 10rpx;
			text-align: center;
			border-radius: 15rpx;
			background-color: #E5E5E5;

			.datetime11 {
				font-size: 25rpx;
				position: relative;
				text-align: center;

				color: #AAAAAA;
			}
		}

		.mycolor {
			border: 3rpx solid #E64340;
			width: 30%;
			height: 130rpx;
			margin: 10rpx;
			text-align: center;
			border-radius: 15rpx;
			background-color: #FFFFFF;

			.datetime11 {
				font-size: 25rpx;
				position: relative;
				text-align: center;

				color: #E64340;
			}
		}
	}

	.time {
		border-top: 1rpx none #3B4144;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		margin-top: 10rpx;

		.timenoon {
			border: 1rpx solid #3B4144;
			width: 45%;
			height: 200rpx;
			margin-left: 20rpx;
			margin-top: 20rpx;
			border-radius: 15px;
			background-color: #FFFFFF;

			.timenoon1 {
				text-align: center;
				position: relative;
				top: 50rpx;
				margin-bottom: 20rpx;
				font-size: 40rpx;
			}
		}

		.mycolor {
			border: 1rpx solid #E64340;
			width: 45%;
			height: 200rpx;
			margin-left: 20rpx;
			margin-top: 20rpx;
			border-radius: 15px;
			background-color: #FFFFFF;

			.timenoon1 {
				text-align: center;
				position: relative;
				top: 50rpx;
				margin-bottom: 20rpx;
				font-size: 40rpx;
				color: #E64340;
			}
		}

		.ismycolor {
			border: 1rpx solid #AAAAAA;
			width: 45%;
			height: 200rpx;
			margin-left: 20rpx;
			margin-top: 20rpx;
			border-radius: 15px;
			background-color: #E5E5E5;

			.timenoon1 {
				text-align: center;
				position: relative;
				top: 50rpx;
				margin-bottom: 20rpx;
				font-size: 40rpx;
				color: #AAAAAA;
			}
		}
	}

	.buttionyes {
		width: 80%;
		height: 80%;
		margin: 10rpx;
		margin-left: 10%;
	}

	.isbuttionyes {
		background-color: #FFFFFF;
		text-align: center;
		width: 100%;
		position: fixed;
		bottom: 1rpx;
	}

	.isbottom {
		text-align: center;
		width: 450rpx;
		height: 100rpx;
		display: flex;
		flex-wrap: wrap;
		position: relative;
		left: 200rpx;
	}

	.list-text1 {
		width: 100%;
		height: 50upx;
		line-height: 90upx;
		font-size: 25upx;
		color: #555;
		flex: 1;
	}
</style>
